<template>
  <div>
    <div v-if="skipShow" class="skipBtn" @click.stop="skipFun">跳过</div>
    <canvas v-if="whoFirst" class="markCanvas" id="markCanvas"></canvas>
    <div
      class="immediatelyClass"
      v-show="immediatelyShow"
      @click.stop="immediatelyClick"
    >
      <div class="arrowAll">
        <img class="arrowAllLeft" src="/img/cockpit/arrowLeft.png" />
        <img class="arrowAllRight" src="/img/cockpit/arrowRight.png" />
      </div>
      <img
        style="
          position: absolute;
          z-index: 1000;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        "
        src="/img/cockpit/enterImmediately.png"
      />
    </div>
    <!--  v-show="whoFirst2" -->
    <div class="cockpit">
      <Header class="cockpit-header" :single="true" />
      <el-tooltip effect="dark" content="图标说明" placement="bottom">
        <el-button
          class="toHelp"
          :class="{ isSmall }"
          @click.stop="requestHelp"
        ></el-button
      ></el-tooltip>
      <el-tooltip effect="dark" content="全屏显示" placement="bottom">
        <el-button
          class="toFull"
          :class="{ isSmall }"
          @click.stop="requestFullScreen"
        ></el-button
      ></el-tooltip>
      <el-tooltip effect="dark" content="双倍屏" placement="bottom">
        <el-button
          class="toDub"
          :class="{ isSmall }"
          @click.stop="changeDub"
        ></el-button
      ></el-tooltip>
      <el-tooltip effect="dark" content="返回管理系统" placement="bottom">
        <el-button
          class="toHome"
          :class="{ isSmall }"
          @click.stop="backToHome"
        ></el-button>
      </el-tooltip>

      <div id="cesiumContainer"></div>
      <!--    双屏驾驶舱-->
      <div class="cockpit-left"></div>
      <div class="cockpit-right"></div>
      <div class="compass" v-if="compassShow"></div>
      <Footer2
        class="cockpit-footer"
        @waringClick="waringClick"
        @flyPlanClick="flyPlanClick"
        :isSmall="isSmall"
        @footerHide="footerHide"
      />

      <!-- 普通弹窗 -->
      <Card
        id="cardID"
        :visible="dialogVisible"
        :title="title"
        :content="content"
        :typeCard="typeCard"
        @visibleClose="visibleClose"
        @drawLine="addCurUAVLine"
        @removeLine="removeCurUAVLine"
        :single="true"
        v-drag
      />
      <!-- 飞机、飞手信息弹窗 -->
      <Tabs
        v-drag
        id="tabCard"
        ref="tabs"
        @drawLine="addCurUAVLine"
        @removeLine="removeCurUAVLine"
        @drawAirspace="addCurAirspace"
        @removeAirspace="removeCurAirspace"
        @showWaringTabs="showWaringTabs"
        @changeIsShowDetail="changeIsShowDetail"
        :single="true"
      />
      <!-- 飞行计划弹窗 -->
      <ManagerTabs
        title="飞行计划"
        ref="flyingTabsRef"
        :visible="managerTabsVisible"
        @ManagerTabsExpand="ManagerTabsExpand"
        @managerVisibleClose="managerVisibleClose"
        @changeIsShowDetail="changeIsShowDetail"
        :single="true"
      />
      <!-- 预警事件弹窗 -->
      <WarningTabs
        title="报警事件"
        ref="waringTabsRef"
        :visible="waringVisible"
        @waringExpand="waringExpand"
        @WarningVisibleClose="WarningVisibleClose"
        @changeIsShowDetail="changeIsShowDetail"
        :single="true"
      />
      <!-- 报警事件组建 -->
      <AlarmTabs :single="true" v-drag />
      <!-- 今日报警数量统计 -->
      <NumberCenter :single="true" />
      <!-- 右侧工具栏 -->
      <ToolTab
        @flyPlanClose="flyPlanClose"
        @waringClose="waringClose"
        @ranging="ranging"
        @heightSearch="heightSearch"
        @defaultPerspect="defaultPerspect"
        @waringShowView="waringShowView"
        @waringShowViewClose="waringShowViewClose"
        :isSmall="isSmall"
        :footerIsShow="footerIsShow"
        ref="childComponentRef"
      />
      <!-- 高度搜索 -->
      <HeightSearch @heightSearch="heightSearch" :single="true" />
      <!-- 今日报警数量 -->
      <TodayWaring :single="true" />
      <!-- 今日侦测架次 -->
      <TodaySorties :single="true" />
      <!-- 点击预警演示后显示的弹窗 -->
      <div
          v-drag
          id="waringShowViewClass"
          class="waringShowViewClass"
          v-if="isWaringShow"
          @click.stop
      >
        <div
            class="waringShowViewClass-item"
            :class="{ active: classificationsshow == 1 }"
            @click="handlerclassification(1)"
        >
          空域管理类预警
          <span class="item-img"
          ><img
              src="/img/cockpit/topdown.png"
              alt=""
              v-if="classificationsshow == 1" />
            <img src="/img/cockpit/lowdown.png" alt="" v-else
            /></span>
        </div>
        <el-checkbox-group
            v-model="checkWaring"
            @change="handleCheckAllChange"
            class="groupstyle"
            v-if="classificationsshow == 1"
        >
          <el-checkbox
              v-for="item in managelist"
              :label="item.value"
              :key="item.label"
              size="large"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div
            class="waringShowViewClass-item"
            :class="{ active: classificationsshow == 2 }"
            @click="handlerclassification(2)"
        >
          飞行安全类预警
          <span class="item-img"
          ><img
              src="/img/cockpit/topdown.png"
              alt=""
              v-if="classificationsshow == 2" />
            <img src="/img/cockpit/lowdown.png" alt="" v-else
            /></span>
        </div>
        <!--  :max="1" 用来禁用单选-->
        <el-checkbox-group
            v-model="checkWaring"
            :disabled="clickWaringDis"
            @change="handleCheckAllChange"
            class="groupstyle"
            v-if="classificationsshow == 2"
        >
          <el-checkbox
              v-for="item in flightsafety"
              :label="item.value"
              :key="item.label"
              size="large"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div
            class="waringShowViewClass-item"
            :class="{ active: classificationsshow == 3 }"
            @click="handlerclassification(3)"
        >
          通信导航设备类预警
          <span class="item-img"
          ><img
              src="/img/cockpit/topdown.png"
              alt=""
              v-if="classificationsshow == 3" />
            <img src="/img/cockpit/lowdown.png" alt="" v-else
            /></span>
        </div>
        <el-checkbox-group
            v-model="checkWaring"
            :disabled="clickWaringDis"
            @change="handleCheckAllChange"
            class="groupstyle"
            v-if="classificationsshow == 3"
        >
          <el-checkbox
              v-for="item in communicationlist"
              :label="item.value"
              :key="item.label"
              size="large"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div
            class="waringShowViewClass-item"
            :class="{ active: classificationsshow == 4 }"
            @click="handlerclassification(4)"
        >
          环境与气象预警
          <span class="item-img"
          ><img
              src="/img/cockpit/topdown.png"
              alt=""
              v-if="classificationsshow == 4" />
            <img src="/img/cockpit/lowdown.png" alt="" v-else
            /></span>
        </div>
        <el-checkbox-group
            v-model="checkWaring"
            :disabled="clickWaringDis"
            @change="handleCheckAllChange"
            class="groupstyle"
            v-if="classificationsshow == 4"
        >
          <el-checkbox
              v-for="item in meteorologicallist"
              :label="item.value"
              :key="item.label"
              size="large"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div
            class="waringShowViewClass-item"
            :class="{ active: classificationsshow == 5 }"
            @click="handlerclassification(5)"
        >
          特殊飞行器预警
          <span class="item-img"
          ><img
              src="/img/cockpit/topdown.png"
              alt=""
              v-if="classificationsshow == 5" />
            <img src="/img/cockpit/lowdown.png" alt="" v-else
            /></span>
        </div>
        <el-checkbox-group
            v-model="checkWaring"
            :disabled="clickWaringDis"
            @change="handleCheckAllChange"
            class="groupstyle"
            v-if="classificationsshow == 5"
        >
          <el-checkbox
              v-for="item in speciallist"
              :label="item.value"
              :key="item.label"
              size="large"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div
            class="waringShowViewClass-item"
            :class="{ active: classificationsshow == 6 }"
            @click="handlerclassification(6)"
        >
          多发预警
          <span class="item-img"
          ><img
              src="/img/cockpit/topdown.png"
              alt=""
              v-if="classificationsshow == 6" />
            <img src="/img/cockpit/lowdown.png" alt="" v-else
            /></span>
        </div>
        <el-checkbox-group
            v-model="checkWaring"
            :disabled="clickWaringDis"
            @change="handleCheckAllChange"
            class="groupstyle"
            v-if="classificationsshow == 6"
        >
          <el-checkbox
              v-for="item in notOnlyOnelist"
              :label="item.value"
              :key="item.label"
              size="large"
          >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>

      <alarm-tabs-waring
        ref="alarmTabsWarin"
        :alarmNameNum="alarmNameNum"
        @isTabsShow="isTabsShowFun"
        :visible="alarmWaringVisible"
        :single="true"
      />
      <tabs-waring
        :visible="tabsWaringVisible"
        :single="true"
        @showWaringTabs2="showWaringTabs2"
      />
      <div class="helpCard" v-if="isHelpCard">
        <div class="helpCard-content">
          <div class="UAV1"></div>
          <div>审核通过的无人机</div>
        </div>
        <div class="helpCard-content">
          <div class="UAV2"></div>
          <div>行业无人机</div>
        </div>
        <div class="helpCard-content">
          <div class="UAV3"></div>
          <div>适飞区无人机</div>
        </div>
        <div class="helpCard-content">
          <div class="UAV4"></div>
          <div>黑飞无人机</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  provide,
  reactive,
  ref,
  nextTick,
  getCurrentInstance,
  onUnmounted,
  onBeforeMount,
  onBeforeUnmount,
} from "vue";
import { ElMessage, ElNotification } from "element-plus";
import Footer2 from "@/views/airMonitor/components/footer2.vue";
import Header from "@/views/airMonitor/components/header.vue";
import Card from "@/views/airMonitor/components/card.vue";
import Tabs from "@/views/airMonitor/components/tabs.vue";
import ManagerTabs from "@/views/airMonitor/components/managerTabs.vue";
import WarningTabs from "@/views/airMonitor/components/warningTabs.vue";
import AlarmTabs from "@/views/airMonitor/components/alarmTabs.vue";
import NumberCenter from "@/views/airMonitor/components/numberCenter.vue";
import ToolTab from "@/views/airMonitor/components/toolTab.vue";
import HeightSearch from "@/views/airMonitor/components/HeightSearch.vue";
import TodayWaring from "@/views/airMonitor/components/TodayWaring.vue";
import TodaySorties from "@/views/airMonitor/components/TodaySorties.vue";
import * as CesiumAll from "cesium";
import Cesium from "@/utils/cesium";
import Windy from "@/utils/windyClass";
import useCockpitStore from "@/store/modules/cockpit";
import useFlightTaskStore from "@/store/modules/flightTask";
import useMqttStore from "@/store/modules/mqttInfo";
import axios from "axios";
import { WindyData } from "@/utils/mockWindy.js";
import { getToken } from "@/utils/auth";
import { blobValidate } from "@/utils/ruoyi";
import Controller from "@/utils/geoMap";
import Threesence from "@/utils/threesence";
import { getDetailInfo } from "@/api/airSpace/airSpaceSetUp";
import { getDeviceDetail, getDeviceWeather } from "@/api/cockpit/device";
import { getAirportWeather } from "@/api/cockpit/weather";
import MeasureTools from "@/utils/measureTool";
import { getAirTypeIds } from "@/api/airSpace/enquiry";
import mqtt from "mqtt/dist/mqtt";
import { useRoute, useRouter } from "vue-router";
import { getTemperature } from "@/api/cockpit/meteorological";
import { gcj02towgs84 } from "@/utils/coordinateTrans";
import { PAGInit } from "libpag";
import AlarmTabsWaring from "@/views/airMonitor/components/alarmTabsWaring.vue";
import TabsWaring from "@/views/airMonitor/components/tabsWaring.vue";
import useFootBtnsStore from "@/store/modules/footBtns";

const route = useRoute();
const router = useRouter();
const whoFirst = ref(true);
const skipShow = ref(false);
const immediatelyShow = ref(false);
const whoFirst2 = ref(false);
const mqttStore = useMqttStore();
let { that, proxy } = getCurrentInstance();
const cockpitStore = useCockpitStore();
const flyTaskStore = useFlightTaskStore();
const dialogVisible = ref(false);
const tabs = ref();
const waringTabsRef = ref();
const flyingTabsRef = ref();
const compassShow = ref(false);
const managerTabsVisible = ref(false);
const waringVisible = ref(false);
const title = ref("");
const childComponentRef = ref(null);
// card组件的标题
const typeCard = ref("");
// 传递给card组件的内容
let content = ref({});
// 浏览器宽度小于1550
const isSmall = ref(false);
// 底部菜单是否显示
const footerIsShow = ref(false);
// 是否查看详情
const isShowDetail = ref(false);
const isHelpCard = ref(false);

// ------------------------------------------------------   预警演示    -------------------------------------------------//
// 预警演示弹窗是否显示
const isWaringShow = ref(false);
const alarmNameNum = ref("");
const alarmTabsWarin = ref();
const alarmWaringVisible = ref(false);
const tabsWaringVisible = ref(false);
const checkWaring = ref([]);
const clickWaringDis = ref(false);
let waringList = [
  {
    label: "民航预警",
    value: "MINHANG",
  },
  {
    label: "无人机侵入预警",
    value: "QINRU",
  },
  {
    label: "无人机侵出预警",
    value: "Invasion",
  },
  {
    label: "航线冲突预警",
    value: "Conflict",
  },
  {
    label: "电磁干扰预警",
    value: "Interfere",
  },
  {
    label: "气象演示",
    value: "QIXIANG",
  },
  {
    label: "限高演示",
    value: "HeightLimit",
  },
  {
    label: "热气球预警演示",
    value: "REQIQIU",
  },
  {
    label: "途径热门区域预警",
    value: "PopularAreas",
  },
  {
    label: "多发坠机区域预警",
    value: "CrashPoint",
  },
];
let managelist = [
  {
    label: "民航预警",
    value: "MINHANG",
  },
  {
    label: "无人机侵入预警",
    value: "QINRU",
  },
  {
    label: "无人机侵出预警",
    value: "Invasion",
  },
  {
    label: "航线冲突预警",
    value: "Conflict",
  },
  {
    label: "限高演示",
    value: "HeightLimit",
  },
  {
    label: "偏离空域预警",
    value: "Pianli"
  }
];
//飞行安全预警
let flightsafety = [
  {
    label: "途径热门区域预警",
    value: "PopularAreas",
  },
  {
    label: "多发坠机区域预警",
    value: "CrashPoint",
  },
  {
    label: "反制设备预警",
    value: "CounterWarning",
  },
];
//通信导航预警
let communicationlist = [
  {
    label: "电磁干扰预警",
    value: "Interfere",
  },
];
//气象预警
let meteorologicallist = [
  {
    label: "风力风速预警",
    value: "WindSpeed",
  },
  {
    label: "降雨降雪预警",
    value: "QIXIANG"
  }
];
//特殊飞行器
let speciallist = [
  {
    label: "热气球预警演示",
    value: "REQIQIU",
  },
  {
    label: "飞艇预警演示",
    value: "FEITING"
  },
  {
    label: "航模预警演示",
    value: "HANGMO",
  },
];
//多发
let notOnlyOnelist = [
  {
    label: "多发预警演示",
    value: "DUOFA",
  },
];
let timerss = null;
/**
 * @无人机侵入演示   》》》》》》》》》》eg
 */
let Interval1;
let setTimeout1;
let setTimeout2;
let Intervalminhang;
let imgIcon = null;
let flyPeopleIcon = null;
// 图片数组
let imgIconList = [];
let trackList = [];
// let markerPoint = null;
let minhangimgicon = null;
let markerGeoPoint = [];
let footBtnsStore = useFootBtnsStore();
let Invasionline1;
let cylinder;
let circular1;
let conflictcCircular1;
let conflictcCircular2;
let InvasionInterval2;
let invasionInterval;
let particles;
let message = null;

//限高
let HeightLimitGeometry;
let HeightLimitInterval = null;
let HeightLimitsetTimeout = null;
let HeightLimittext = null;
//途径热门区域
let PopularAreastext = null;
let PopularAreasInterval = null;
let PopularAreassetTimeout = null;
//途径坠机多发区域
let CrashPointtext = null;
let CrashPointTimeout = null;
let CrashPointInterval = null;

function handleCheckAllChange(val) {
  let airspace = [...footBtnsStore.defaultAirspace];
  if (val.length === 0) {
    clear();
    airspace.forEach((item) => {
      hideAirspace(item);
    });
    clearImmediate();
    GTitleset.clearRemovedrawlLine();
    isShowDetail.value = false;
    alarmWaringVisible.value = false;
    tabsWaringVisible.value = false;
    mqttStore.rebackMqttWaring();
    mqttMsg();
    defaultPerspect();
    GTitleset.remove(Invasionline1);
    GTitleset.remove(circular1);
    GTitleset.remove(conflictcCircular1);
    GTitleset.remove(conflictcCircular2);
    GTitleset.remove(flyPeopleIcon);
    // 清除圆柱
    GTitleset.remove(cylinder);
    GTitleset.clearAtmosphere();
    // imgIcon = null;
    // 清除图片
    imgIconList.forEach((item) => {
      GTitleset.remove(item);
    });
    defaultPerspect();
    clearInterval(invasionInterval);
    clearInterval(InvasionInterval2);
    clearInterval(InvasionInterval3);
    // 清除定时器1
    if (Interval1) {
      clearInterval(Interval1);
    }
    if (setTimeout1) {
      clearTimeout(setTimeout1);
    }
    if (setTimeout2) {
      clearTimeout(setTimeout2);
    }
    if (message) {
      message.close();
    }
    // if (markerPoint.length > 0) {
    //   markerPoint.forEach((id) => {
    //     aMap.remove(id);
    //   });
    // }
    //限高演示的清除
    if (HeightLimitInterval) {
      clearInterval(HeightLimitInterval);
    }
    // 清除圆柱
    GTitleset.remove(HeightLimitGeometry);
    if (HeightLimitsetTimeout) {
      clearTimeout(HeightLimitsetTimeout);
    }
    //清除限高文字
    GTitleset.remove(HeightLimittext);

    // 热门区域清除//
    if (PopularAreasInterval) {
      clearInterval(PopularAreasInterval);
    }
    if (PopularAreassetTimeout) {
      clearTimeout(PopularAreassetTimeout);
    }
    //清除热力图
    GController.removeheatmap();
    //清除热门区域文字
    GTitleset.remove(PopularAreastext);

    // 坠机区域清除//
    //清除坠机区域文字
    GTitleset.remove(CrashPointtext);
    if (CrashPointInterval) {
      clearInterval(CrashPointInterval);
    }
    if (CrashPointTimeout) {
      clearTimeout(CrashPointTimeout);
    }
    GController.removeMassPoint("PopularPoints");
    return;
  }
  // GTitleset.clearRemovedrawlLine()
  // 关闭普通弹窗
  visibleClose();
  // 关闭飞行器弹窗
  if (isShowDetail.value) tabs.value.tabsVisibleClose();
  // 断开mqtt链接
  stopConnect();
  // 关闭告警弹窗
  mqttStore.clearMqttWaring();
  switch (val[0]) {
    case "QINRU":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.012337, 30.18361, 300],
        "UAVNormalFly.png"
      );
      flyPeopleIcon = GTitleset.flyicon(
        [119.970108, 30.167286, 0],
        "flyHandBB.png",
        [0.03, 0.03]
      );

      //绘制曲线
      let line1 = GTitleset.curvetrajectory([
        [119.970108, 30.167286, 300],
        [119.987175, 30.177054, 300],
      ]);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          message = ElMessage.warning({
            message: "发现无人机侵入，已通知飞手返航！",
            duration: 25000,
          });
          drawLine2();
          // 清除定时器1
          if (Interval1) {
            clearInterval(Interval1);
          }
          //清除图标
          GTitleset.remove(imgIcon);
        }
      }, 200);
      cylinder = GTitleset.CysGeometry(
        [120.012337, 30.18361],
        3000,
        700,
        "#ce2c29",
        {
          airTypeId: 1258365545,
        }
      );
      aMap.setZoomAndCenter(13, [120.012337, 30.18361], false);

      break;
    case "Invasion":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.0717640415461, 30.185688130425536, 1000],
        "UAVNormalFly.png"
      );

      trackList = [
        [120.0717640415461, 30.185688130425536, 1000],
        [120.09476592362535, 30.193291655905345, 1000],
      ];
      //绘制曲线
      Invasionline1 = GTitleset.exampleTrack(trackList);
      invasionInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#00ff00");
        if (stopInterval == "stop") {
          message = ElMessage.warning({
            message: "无人机偏离航线，已通知飞手返航！",
            duration: 25000,
          });
          InvasiondrawLine2();
          // 清除定时器
          if (invasionInterval) {
            clearInterval(invasionInterval);
          }
          //清除图标
          GTitleset.remove(imgIcon);
        }
      }, 200);
      circular1 = GTitleset.circular1();
      // setTimeout(() => {
      // GController.flyToTarget([120.116538, 30.225123]);
      // }, 25000);
      aMap.setZoomAndCenter(
        13,
        [120.09476592362535, 30.193291655905345],
        false
      );
      break;
    case "Interfere":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 100],
        "UAVNormalFly.png"
      );
      alarmNameNum.value = "前方有电磁干扰，已通知飞手避让！";
      waringAction();
      // clickWaringFunTrue();
      trackList = [
        [120.18193245, 30.29375707, 100],
        [120.18588066, 30.29372002, 100],
        [120.18982887, 30.29360885, 100],
        [120.19347668, 30.29349769, 100],
        [120.19776821, 30.29346063, 100],
        [120.20175934, 30.2932383, 100],
        [120.2058363, 30.28916419, 100],
        [120.20974159, 30.2892383, 100],
        [120.21403313, 30.28997891, 100],
        [120.21819592, 30.29271952, 100],
        [120.22184372, 30.29253424, 100],
        [120.2251482, 30.29231191, 100],
      ];
      //绘制曲线
      let Interfereline = GTitleset.exampleTrack(
        trackList,
        [120.20974159, 30.2952383, 100]
      );
      let deviceIcon = GTitleset.flyicon(
        [120.20974159, 30.2952383, 100],
        "Frame1.png",
        [0.03, 0.03]
      );
      imgIconList.push(deviceIcon);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#00ff00");
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      setTimeout(() => {
        message = ElMessage.warning({
          message: "前方有电磁干扰，已通知飞手避让！",
          duration: 10000,
        });
      }, 3000);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "MINHANG":
      isShowDetail.value = true;
      // dialogVisible.value = false;
      airspace.forEach((item) => {
        addAirspace(item);
      });
      let pontData = [
        {
          longitude: 120.42114258,
          latitude: 30.17369761,
          icon: "/img/cockpit/flyy1.png",
        },
      ];
      markerGeoPoint = GController.drawIconTemp(pontData, false);
      minhangimgicon = GTitleset.flyicon(
        [120.21029877, 30.17518614, 1200],
        "minghangFly.png"
      );
      //绘制曲线
      let minhangline1 = GTitleset.curvetrajectory([
        [120.21029877, 30.17518614, 1200],
        [120.22029877, 30.17718614, 1000],
        [120.24742126, 30.17985725, 887],
        [120.27076721, 30.18312184, 710],
        [120.29582977, 30.18668309, 600],
      ]);
      Intervalminhang = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(minhangimgicon);
        if (stopInterval == "stop") {
          console.log("stop=====");

          if (markerGeoPoint.length > 0) {
            markerGeoPoint.forEach((id) => {
              aMap.remove(id);
            });
          }
          InvasiondrawLined();
          // 清除定时器
          if (Intervalminhang) {
            clearInterval(Intervalminhang);
          }
          //清除图标
          GTitleset.remove(minhangimgicon);
        }
      }, 200);
      // GTitleset.circular1();
      aMap.setZoomAndCenter(12, [120.38028717, 30.20715777, 600], false);
      break;
    case "Conflict":
      var imgIcon2 = null;
      var imgIcon4 = null;
      showJudgment.value = true;
      Judtext.value =
          "行业级无人机以自己为中心有一个半径为40m的警戒圈(目前大部分无人机的飞行秒速均值为20m/s),消费级无人机如果进入了行业无人机的警戒圈,通知两架无人机悬停,通知行业级无人机等待,待消费级无人机飞出警戒圈后,行业级无人机继续飞行。";
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon([120.049213, 30.211294, 1000], "UAV2.png");
      //绘制曲线
      var Conflictline1 = GTitleset.curvetrajectory([
        [120.049446, 30.209753, 1000],
        [120.076949, 30.218669, 1000],
        [120.096949, 30.223669, 1000],
      ]);
      GTitleset.diffusionwave(1.5, 0xffff00, [120.049213, 30.211294]);

      Interval1 = setInterval(() => {
        var stopInterval = GTitleset.moveOnCurve(imgIcon, "#ff0000", true);
        if (stopInterval == "stop") {
          GTitleset.removeLineList2();
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }

          message = ElMessage.warning({
            message: "发现航线冲突，已通知飞手避让！",
            duration: 25000,
          });
          showWarninginformation.value = true;
          imgurl.value = "/img/message/conflict1.png";
          setTimeout(() => {
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 200);

          //清除图标
          GTitleset.remove(imgIcon);
          imgIcon4 = GTitleset.flyicon(
              [120.096949, 30.223669, 1000],
              "UAV2.png"
          );
          imgIconList.push(imgIcon4);
          // 屏闪
          flicker();
          //绘制曲线
          var line2 = GTitleset.curvetrajectory([
            [120.116362, 30.217175, 1000],
            [120.104145, 30.246297, 1000],
          ]);
          ConflictInterval2 = setInterval(() => {
            var stopInterval = GTitleset.moveOnCurve(imgIcon2); // 第二条轨道无人机移动
            // let stopIntervalText = GTitleset.moveOnCurveText(imgicon, "#ffffff");
            if (stopInterval == "stop") {
              GTitleset.removeLineList2();
              //清除图标
              GTitleset.remove(imgIcon2);
              // 清除定时器1
              if (ConflictInterval2) {
                clearInterval(ConflictInterval2);
              }
              var line3 = GTitleset.curvetrajectory([
                [120.093203, 30.222904, 1000],
                [120.1264, 30.229937, 1000],
                [120.138136, 30.23318, 1000],
                [120.161535, 30.243575, 1000],
              ]);
              GTitleset.diffusionwave(1.5, 0xffff00, [120.09344, 30.22325]);
              // 第一架次（第二次飞行）
              var ConflictInterval4 = setInterval(() => {
                var stopInterval4 = GTitleset.moveOnCurve(
                    imgIcon4,
                    "#ff0000",
                    true
                );
                if (stopInterval4 == "stop") {
                  GTitleset.remove(imgIcon4);
                  // 清除定时器1
                  if (ConflictInterval4) {
                    clearInterval(ConflictInterval4);
                  }
                }
              }, 200);
              intervalList.push(ConflictInterval4);
            }
          }, 200);
          intervalList.push(ConflictInterval2);
        }
      }, 200);
      intervalList.push(Interval1);
      // 管道1
      conflictcCircular1 = GTitleset.circular1(
          [
            [120.049446, 30.209753, 1000],
            [120.076949, 30.218669, 1000],
            [120.138136, 30.23318, 1000],
            [120.161535, 30.243575, 1000],
          ],
          "#23f155"
      );
      setTimeout2 = setTimeout(() => {
        setTimeout1 = setTimeout(() => {
          // clickWaringFunTrue();
          showWarninginformation.value = true;
          imgurl.value = "/img/message/conflict2.png";
          setTimeout(() => {
            // 使用JavaScript添加类名来触发过渡效果
            const myDiv = document.getElementById("myDiv");
            myDiv.classList.add("show");
          }, 200);
        }, 200);
      }, 10000);
      // setTimeout3 = setTimeout(() => {
      // 管道2
      conflictcCircular2 = GTitleset.circular1(
          [
            [120.104145, 30.246297, 1000],
            [120.116362, 30.217175, 1000],
            [120.128349, 30.194381, 1000],
          ],
          "#ab0709"
      );
      imgIcon2 = GTitleset.flyicon([120.127943, 30.194519, 1000], "UAV3.png");
      imgIconList.push(imgIcon2);
      var timeout1 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.126755, 30.196557, 1000], "UAV3.png");
        imgIconList.push(imgIcon2);
      }, 1500);
      var timeout2 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.125534, 30.199004, 1000], "UAV3.png");
        imgIconList.push(imgIcon2);
      }, 3000);
      var timeout3 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.122958, 30.203091, 1000], "UAV3.png");
        imgIconList.push(imgIcon2);
      }, 4500);
      var timeout4 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.120616, 30.207697, 1000], "UAV3.png");
        imgIconList.push(imgIcon2);
      }, 6000);
      var timeout5 = setTimeout(() => {
        GTitleset.remove(imgIcon2);
        imgIcon2 = GTitleset.flyicon([120.119589, 30.209934, 1000], "UAV3.png");
        imgIconList.push(imgIcon2);
      }, 7000);
      timeoutList.push(timeout1);
      timeoutList.push(timeout2);
      timeoutList.push(timeout3);
      timeoutList.push(timeout4);
      timeoutList.push(timeout5);
      aMap.setZoomAndCenter(13, [120.116949, 30.223669, 600], false);
      break;
    case "QIXIANG":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.072378, 30.312835, 100],
        "UAVNormalFly.png"
      );
      let imgIcon3 = GTitleset.flyicon(
        [120.114879, 30.314998, 10],
        "equipmentMeteorology.png"
      );
      imgIconList.push(imgIcon3);
      trackList = [
        // 直线的轨迹
        [120.072378, 30.312835, 100],
        [120.106469, 30.310649, 100],
        [120.087879, 30.299263, 100],
      ];
      //绘制曲线
      let Interfereline2 = GTitleset.meteorologicalShow(
        trackList,
        [120.111221, 30.310799, 100]
      );
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#00ff00");
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      break;
    case "HeightLimit":
      isShowDetail.value = true;
      HeightLimittext = GTitleset.createTag(
        [120.115486, 30.267365, 200],
        "限高120m"
      );
      imgIcon = GTitleset.flyicon(
        [120.111154, 30.264103, 0],
        "UAVNormalFly.png"
      );
      HeightLimitGeometry = GTitleset.CysGeometry(
        [120.112704, 30.26563],
        3000,
        120,
        "#ce2c29",
        {},
        250
      );
      //绘制曲线
      let HeightLimitline = GTitleset.curvetrajectory([
        [120.111154, 30.264103, 0],
        [120.113403, 30.265646, 200],
        [120.115114, 30.265619, 0],
      ]);
      HeightLimitInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon);
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (HeightLimitInterval) {
            clearInterval(HeightLimitInterval);
          }
        }
      }, 200);
      HeightLimitsetTimeout = setTimeout(() => {
        message = ElMessage.warning({
          message: "发现无人机超出限制高度，已通知飞手降低高度！",
          duration: 6000,
        });
      }, 5000);
      aMap.setZoomAndCenter(17.8, [120.112704, 30.26563]);
      // aMap.setRotation();
      aMap.setPitch(90);
      break;
    case "REQIQIU":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.18193245, 30.29375707, 100],
        "UAVNormalFly.png"
      );
      alarmNameNum.value = "前方发现热气球，已通知飞手避让！";
      waringAction();
      // clickWaringFunTrue();
      trackList = [
        [120.18193245, 30.29375707, 100],
        [120.18588066, 30.29372002, 100],
        [120.18982887, 30.29360885, 100],
        [120.19347668, 30.29349769, 100],
        [120.19776821, 30.29346063, 100],
        [120.20175934, 30.2932383, 100],
        [120.2058363, 30.28916419, 100],
        [120.20974159, 30.2892383, 100],
        [120.21403313, 30.28997891, 100],
        [120.21819592, 30.29271952, 100],
        [120.22184372, 30.29253424, 100],
        [120.2251482, 30.29231191, 100],
      ];
      //绘制曲线
      let Interfereline1 = GTitleset.exampleTrack(trackList);
      let deviceIcon1 = GTitleset.flyicon(
        [120.20974159, 30.2952383, 100],
        "reqiqiu.png",
        [0.04, 0.04]
      );
      imgIconList.push(deviceIcon1);
      Interval1 = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#00ff00");
        if (stopInterval == "stop") {
          // 清除定时器
          if (Interval1) {
            clearInterval(Interval1);
          }
        }
      }, 200);
      setTimeout(() => {
        message = ElMessage.warning({
          message: "前方发现热气球，已通知飞手避让！",
          duration: 10000,
        });
      }, 3000);
      aMap.setZoomAndCenter(14.7, [120.20974159, 30.2952383], false);
      break;
    case "PopularAreas":
      isShowDetail.value = true;
      PopularAreastext = GTitleset.createTag(
        [120.210609, 30.248366, 1500],
        "热门区域"
      );
      imgIcon = GTitleset.flyicon(
        [120.185926, 30.227023, 1500],
        "UAVNormalFly.png"
      );
      // 绘制曲线
      let PopularAreasline = GTitleset.curvetrajectory([
        [120.185926, 30.227023, 1500],
        [120.221094, 30.254866, 1500],
      ]);
      PopularAreasInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#e63f31");
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (PopularAreasInterval) {
            clearInterval(PopularAreasInterval);
          }
        }
      }, 200);
      PopularAreassetTimeout = setTimeout(() => {
        message = ElMessage.warning({
          message: "已通知飞手途径热门区域",
          duration: 6000,
        });
      }, 2000);
      aMap.setZoomAndCenter(14, [120.210609, 30.248366]);
      GController.drawheatmap();
      break;
    case "CrashPoint":
      isShowDetail.value = true;
      imgIcon = GTitleset.flyicon(
        [120.093555, 30.257028, 500],
        "UAVNormalFly.png"
      );
      CrashPointtext = GTitleset.createTag(
        [120.109567, 30.264098, 500],
        "坠机多发区"
      );
      // 绘制曲线
      let CrashPointline = GTitleset.curvetrajectory([
        [120.093555, 30.257028, 500],
        [120.119301, 30.264172, 500],
      ]);
      GController.drawPopularPoints();
      CrashPointInterval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(imgIcon, "#e63f31");
        if (stopInterval == "stop") {
          // message = ElMessage.warning({
          //   message: "发现无人机侵入，已通知飞手返航！",
          //   duration: 25000,
          // });
          // 清除定时器1
          if (CrashPointInterval) {
            clearInterval(CrashPointInterval);
          }
        }
      }, 200);
      CrashPointTimeout = setTimeout(() => {
        message = ElMessage.warning({
          message: "已通知飞手途径坠机多发区",
          duration: 6000,
        });
      }, 2000);
      aMap.setZoomAndCenter(14.7, [120.111154, 30.264103]);
      break;
    default:
      break;
  }

  imgIconList.push(imgIcon);
}

/**
 * @description: 绘制第二段线
 */
let Interval2;
const drawLine2 = () => {
  let imgicon = GTitleset.flyicon(
    [119.987175, 30.177054, 300],
    "UAVNormalFly.png"
  );
  alarmNameNum.value = "飞入管控区，请及时关注!";
  waringAction();
  // clickWaringFunTrue();
  imgIconList.push(imgicon);
  //绘制曲线
  let line1 = GTitleset.curvetrajectory([
    [119.987175, 30.177054, 300],
    [119.99762, 30.178222, 300],
    [119.985238, 30.189945, 300],
  ]);
  Interval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
    if (stopInterval == "stop") {
      // 第三段轨迹
      drawLine3();
      // 清除定时器1
      if (Interval2) {
        clearInterval(Interval2);
      }
      //清除图标
      GTitleset.remove(imgicon);
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};
/**
 * @description: 绘制第三段线
 */
let Interval3;
const drawLine3 = () => {
  let imgicon = GTitleset.flyicon(
    [119.985238, 30.189945, 300],
    "UAVNormalFly.png"
  );
  imgIconList.push(imgicon);
  //绘制曲线
  let line3 = GTitleset.curvetrajectory([
    [119.985238, 30.189945, 300],
    [119.970108, 30.167286, 300],
  ]);
  Interval3 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon);
    if (stopInterval == "stop") {
      clear();
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};
/**
 * @description: 清除定时器
 */
const clear = () => {
  // 清除定时器1
  if (Interval1) {
    clearInterval(Interval1);
  }
  // 清除定时器2
  if (Interval2) {
    clearInterval(Interval2);
  }
  // 清除定时器3
  if (Interval3) {
    clearInterval(Interval3);
  }
};
/**
 * @无人机侵入演示   》》》》》》》》》》eg
 */
/**
 * @无人机侵出演示   》》》》》》》》》》eg
 */
/**
 * @description: 绘制第二段线
 */
const InvasiondrawLine2 = () => {
  let imgicon = GTitleset.flyicon(
    [120.09476592362535, 30.193291655905345, 1000],
    "UAVNormalFly.png"
  );
  alarmNameNum.value = "飞出申请空域，请及时关注!";
  waringAction();
  // clickWaringFunTrue();
  imgIconList.push(imgicon);
  //绘制曲线
  let line2 = GTitleset.curvetrajectory([
    [120.09476592362535, 30.193291655905345, 1000],
    [120.10398403011027, 30.225737074029997, 1000],
    [120.12717032476095, 30.204071932212027, 1000],
  ]);
  InvasionInterval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
    if (stopInterval == "stop") {
      InvasiondrawLine3();
      // 清除定时器1
      if (InvasionInterval2) {
        clearInterval(InvasionInterval2);
      }
      //清除图标
      GTitleset.remove(imgicon);
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @description: 绘制第三段线
 */
let InvasionInterval3;
const InvasiondrawLine3 = () => {
  let imgicon = GTitleset.flyicon(
    [120.12717032476095, 30.204071932212027, 1000],
    "UAVNormalFly.png"
  );
  imgIconList.push(imgicon);
  //绘制曲线
  let line3 = GTitleset.curvetrajectory([
    [120.12717032476095, 30.204071932212027, 1000],
    [120.17580074284429, 30.220185941065505, 1000],
  ]);
  InvasionInterval3 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon);
    if (stopInterval == "stop") {
      // 清除定时器1
      if (InvasionInterval3) {
        clearInterval(InvasionInterval3);
      }
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @description: 绘制段线
 */
let InvasionIntervald;
const InvasiondrawLined = () => {
  let pontData = [
    {
      longitude: 120.42114258,
      latitude: 30.17369761,
      icon: "/img/cockpit/flyy2.png",
    },
  ];
  alarmNameNum.value = "发现民航飞机经过，已通知飞手避让！";
  waringAction();
  // clickWaringFunTrue();
  markerGeoPoint = GController.drawIconTemp(pontData, true);
  imgIcon = GTitleset.flyicon(
    [120.29582977, 30.18668309, 600],
    "minghangFly.png"
  );
  GTitleset.diffusionwave();
  //绘制曲线
  let line2 = GTitleset.curvetrajectory([
    [120.29582977, 30.18668309, 600],
    [120.30784607, 30.18905718, 420],
    [120.38028717, 30.20715777, 210],
    [120.41461945, 30.22139851, 90],
    [120.42114258, 30.22369761, 60],
    [120.42865276, 30.22699782, 0],
  ]);
  InvasionIntervald = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgIcon, "#ff0000", true);
    if (stopInterval == "stop") {
      // InvasiondrawLine3();
      // 清除定时器1
      if (InvasionIntervald) {
        clearInterval(InvasionIntervald);
      }
      //清除图标
      // GTitleset.remove(imgicon);
    }
  }, 200);

  imgIconList.push(imgIcon);
};
const clearImmediate = () => {
  if (markerGeoPoint.length > 0) {
    markerGeoPoint.forEach((id) => {
      aMap.remove(id);
    });
  }
  // 清除定时器
  if (Intervalminhang) {
    clearInterval(Intervalminhang);
  }
  Intervalminhang = null;
  if (InvasionIntervald) {
    clearInterval(InvasionIntervald);
  }
  InvasionIntervald = null;
  //清除图标
  GTitleset.remove(minhangimgicon);
};
/**
 * @无人机侵出演示   》》》》》》》》》》eg
 */

/**
 * @无人机航线冲突预警演示   》》》》》》》》》》eg
 */
/**
 * @description: 绘制冲突预警的线
 */
let ConflictInterval2;
const ConflictdrawLine2 = () => {
  let imgicon = GTitleset.flyicon(
    [120.44089, 30.84722, 300],
    "UAVNormalFly.png"
  );
  //绘制曲线
  let line2 = GTitleset.curvetrajectory([
    [120.162853, 30.204618, 1000],
    [120.14294, 30.240811, 1000],
  ]);
  ConflictInterval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ff0000");
    if (stopInterval == "stop") {
      // 清除定时器1
      if (ConflictInterval2) {
        clearInterval(ConflictInterval2);
      }
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @description: 绘制冲突预警的线
 */
let Conflict2Interval2;
const Conflict2drawLine2 = () => {
  let imgicon = GTitleset.flyicon(
    [120.44089, 30.84722, 300],
    "UAVNormalFly.png"
  );
  //绘制曲线
  let line2 = GTitleset.curvetrajectory([
    [120.128349, 30.194381, 1000],
    [120.104145, 30.246297, 1000],
  ]);
  ConflictInterval2 = setInterval(() => {
    let stopInterval = GTitleset.moveOnCurve(imgicon, "#ffffff");
    // let stopIntervalText = GTitleset.moveOnCurveText(imgicon, "#ffffff");
    if (stopInterval == "stop") {
      // 清除定时器1
      if (ConflictInterval2) {
        clearInterval(ConflictInterval2);
      }
    }
  }, 200);
  // GTitleset.CysGeometry([120.472558, 30.868871], 5000, 700, "#57E78A");
  // aMap.setZoomAndCenter(10, [120.472558, 30.868871], false);
};

/**
 * @无人机航线冲突预警演示   》》》》》》》》》》eg
 */

function clickWaringFunTrue() {
  clickWaringDis.value = true;
}

function clickWaringFun() {
  clickWaringDis.value = false;
}

function waringAction() {
  alarmWaringVisible.value = true;
}

function closeWaringAction() {
  alarmWaringVisible.value = false;
}

function isTabsShowFun() {
  tabsWaringVisible.value = true;
}

function showWaringTabs2() {
  tabsWaringVisible.value = false;
}

// ------------------------------------------------------------动画播放-------------------------------------------------------//
let pagView = null;

function initialization() {
  PAGInit().then((PAG) => {
    let url = null;
    url = "/img/cockpit/actionVideo.pag";
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File(
          [blob],
          url.replace(/(.*\/)*([^.]+)/i, "$2")
        );
        const pagFile = await PAG.PAGFile.load(file);
        let canvas = null;
        canvas = document.getElementById("markCanvas");

        // 解决清晰度问题
        canvas.width = pagFile.width() * window.devicePixelRatio;
        canvas.height = pagFile.height() * window.devicePixelRatio;
        console.log("pagFile", pagFile);
        // 自适应
        pagView = await PAG.PAGView.init(pagFile, canvas, {
          useScale: false,
        });
        // 高清渲染
        // pagView = await PAG.PAGView.init(pagFile, "#pag");
        canvas.style.zIndex = 999;
        pagView.setRepeatCount(0);
        await pagView.play();

        setTimeout(() => {
          // whoFirst.value = false
          skipShow.value = false;
          if (!clickOk) {
            immediatelyShow.value = true;
          }
        }, 10000);
        setTimeout(() => {
          skipShow.value = true;
        }, 4000);
        setTimeout(() => {
          init();
          mqttMsg();
        }, 2000);
      });
  });
}

let clickOk = false;
function skipFun() {
  skipShow.value = false;
  whoFirst.value = false;
  whoFirst2.value = true;
  clickOk = true;
}

function immediatelyClick() {
  whoFirst.value = false;
  immediatelyShow.value = false;
  whoFirst2.value = true;
}

// ------------------------------------------------------------动画播放结束-------------------------------------------------------//

// 地图对象
let takeEffectView = null;
function viewObject(val) {
  takeEffectView = val;
}

const TabsVisible = computed(() => {
  return flyTaskStore.TabsVisible;
});

/**
 * @关闭card弹窗
 */
function visibleClose() {
  dialogVisible.value = false;
  defaultPerspect();
  if (typeCard.value === "plane") {
    removeCurUAVLine();
    isShowDetail.value = false;
  }
}

function managerVisibleClose() {
  managerTabsVisible.value = false;
  childComponentRef.value.flyPlanClickStop();
  // childComponentRef.value.controlFlyPlan();
}

function WarningVisibleClose() {
  waringVisible.value = false;
  childComponentRef.value.waringClickStop();
  // childComponentRef.value.controlWaring();
}

function waringClick() {
  waringVisible.value = true;
  dialogVisible.value = false;
  waringTabsRef.value.getListFun();
}

function flyPlanClick() {
  managerTabsVisible.value = true;
  dialogVisible.value = false;
  flyingTabsRef.value.getListFun();
}

let showTabsType = "";
window.tabsType = false;
function ManagerTabsExpand(val) {
  window.tabsType = val;
  showTabsType = "flying";
  childComponentRef.value.controlFlyPlan();
  managerTabsVisible.value = false;
  // viewer.value.trajectoryAnimation(); // 动画轨迹
}

function waringExpand(val) {
  window.tabsType = val;
  showTabsType = "waring";
  childComponentRef.value.controlWaring();
  waringVisible.value = false;
  // viewer.value.trajectoryAnimation();
}

function flyPlanClose() {
  managerTabsVisible.value = true;
  tabs.value.tabsVisibleClose();
}

function waringClose() {
  waringVisible.value = true;
  tabs.value.tabsVisibleClose();
}

function showWaringTabs() {
  if (showTabsType === "flying") {
    managerTabsVisible.value = true;
  } else if (showTabsType === "waring") {
    waringVisible.value = true;
  }
}

/**
 * @修改是否显示详情
 */
const changeIsShowDetail = () => {
  isShowDetail.value = !isShowDetail.value;
};
// ----------------------------------------------   地图初始化  ---------------------------------------------------------------

let GTitleset = null;
let GController = null;
let aMap = null;
let scene = null;
// let mapCenter = [120.155125, 30.264725];
let mapCenter = [120.180924, 30.186115];
let mapID = "cesiumContainer";

const init = () => {
  if (aMap) return;
  GController = new Controller(mapCenter, openPop);
  aMap = GController.initMap(mapID, changeDefaultView, suoFangDefaultView);
  aMap.on("complete", () => {
    GTitleset = new Threesence(aMap, openPop);
    scene = GTitleset.initThree(mapCenter);
    setTimeout(() => {
      // GTitleset.CysGeometry();
      // GTitleset.addWall();
    }, 2000);
  });
};
let viewer = ref();

function viewDefault() {
  // childComponentRef.value.defaultChange();
}
//测距
function ranging(val) {
  GController.drawRanging(val);
}
//默认视角
function defaultPerspect() {
  GController.defaultAngle(defaultViewShow);
}

function defaultViewShow() {
  childComponentRef.value.defaultChange();
}

function waringShowView() {
  // 点击预警演示后显示弹窗
  isWaringShow.value = true;
}

function waringShowViewClose() {
  isWaringShow.value = false;
  checkWaring.value = [];
  handleCheckAllChange([]);
}

// ----------------------------------------------     mqtt    ------------------------------------------------------------

//  配置MQTT
let client = null; // 实例
let topic = import.meta.env.VITE_BASE_MQTT; // 主题
// let topic = "testtopic/#"; // 主题
let langFlagTopic = "landFlag/123"; // 主题
let weatherTopic = "weather/warn"; // 小气象主题

let options = {
  clientId: "dronelocation-xzw" + Math.random(), //clientId 加随机数可解决诡异重连
  username: "admin", // 用户名
  password: "admin123", // 密码
};
// mqtt 连接地址
let mqttUrl = "ws://211.90.240.122:8083/mqtt";
/**
 * @链接mqtt
 */
const mqttMsg = () => {
  if (!client) {
    client = mqtt.connect(mqttUrl, options);
  }
  // mqtt连接
  client.on("connect", (e) => {
    client.subscribe(topic, { qos: 1 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", topic);
      } else {
        // 消息订阅失败
      }
    });
    client.subscribe(langFlagTopic, { qos: 2 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", langFlagTopic);
      } else {
        // 消息订阅失败
      }
    });
    client.subscribe(weatherTopic, { qos: 2 }, (error) => {
      if (!error) {
        // 消息订阅成功
        console.log("topic订阅成功", weatherTopic);
      } else {
        // 消息订阅失败
      }
    });
  });

  // 接收消息处理
  client.on("message", (topic, msg) => {
    let mqMsg = JSON.parse(msg.toString());

    // 根据主题类型判断执行哪种处理数据方法
    if (topic === "landFlag/123") {
      updateData(mqMsg);
    } else if (topic === "weather/warn") {
      updateWeatherTopic(mqMsg);
    } else {
      aircraftData(mqMsg);
    }
  });

  // 断开发起重连
  client.on("reconnect", (error) => {
    // error
  });
  // 链接异常处理
  client.on("error", (error) => {
    //  error
  });
};

/**
 * @飞行器主题数据处理
 */
const aircraftData = (mqMsg) => {
  // console.log(mqMsg);
  const { landFlag, type, droneUK } = mqMsg;
  // if (landFlag === 2) console.log(type, droneUK);
  // 飞行
  if (landFlag === 1) {
    // 无人机
    if (type !== 7 && type !== 8) {
    }
    // 民航飞行器
    else if (type === 7) {
      const { data } = mqttStore.addMHPlane(mqMsg);
      if (data) {
        let position = [data.longitude, data.latitude, data.height];
        GTitleset.iconSprite(position, data.icon, data, "plane");
      }
    }
    // 通航飞行器
    else if (type === 8) {
      const { data } = mqttStore.addPlane(mqMsg);
      if (data) {
        let position = [data.longitude, data.latitude, data.height];
        GTitleset.iconSprite(position, data.icon, data, "aircraft", 0.03, 0.03);
      }
      mqttStore.alarmEvents(mqMsg);
    }
  }
};

/**
 * @数据更新主题处理
 */
const updateData = (mqMsg) => {
  const { landFlag, type, droneUK } = mqMsg;
  // 降落
  if (landFlag === 2) {
    // console.log(type, droneUK);
    let data;
    if (type !== 7 && type !== 8) {
      data = mqttStore.removeDrone(mqMsg);
    }
    if (type === 7) {
      data = mqttStore.removeMHPlane(mqMsg);
    }
    if (type === 8) {
      data = mqttStore.removePlane(mqMsg);
    }
    if (data) {
      GTitleset.removeIconSprite(data.droneUK);
      GTitleset.removetextSprite(data.droneUK);
    }
  }
};

/**
 * @小气象数据更新主题处理
 */
const updateWeatherTopic = (mqMsg) => {
  let list = [];
  list.push(mqMsg);
  GController.deviceMeteorological(list, "FL");
};

/**
 * @断开链接mqtt
 */
const stopConnect = () => {
  if (client) client.end();
  console.log("断开链接");
};

// ----------------------------------------------   点击地图图标事件    ----------------------------------------------------

/**
 * @地图鼠标拖拽移动事件
 * */
function changeDefaultView() {
  childComponentRef.value.defaultMouse();
}

/**
 * @地图鼠标缩放事件
 * */
function suoFangDefaultView() {
  childComponentRef.value.defaultZoomEnd();
}

/**
 * @根据点击元素不同打开不同弹窗
 * @params val id值
 * @params type 区分航线 设备 ...等
 * */
function openPop(val, type) {
  console.log("val, typeval, type", val, type);
  // changeIsShowDetail()
  switch (type) {
    case "device":
      popDevice(val, type);
      break;
    case "airline":
      popAirline(val, type);
      break;
    case "company":
      popCompany(val, type);
      break;
    case "airport":
      popAirport(val, type);
      break;
    case "plane":
      popPlane(val, type);
      break;
    case "airspace":
      popAirspace(val, type);
      break;
    //
    case "aircraft":
      window.tabsType = false;
      popAircraft(val);
      break;
  }
}

/**
 * @打开设备弹窗
 * */
async function popDevice(val, type) {
  // 关闭tabs弹窗
  if (isShowDetail.value) tabs.value.tabsVisibleClose();
  dialogVisible.value = false;
  typeCard.value = type;
  const { data } = await getDeviceDetail(val);
  title.value = "设备信息";
  content.value = data;
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开航线弹窗
 * */
function popAirline(val, type) {
  // 关闭tabs弹窗
  if (isShowDetail.value) tabs.value.tabsVisibleClose();
  dialogVisible.value = false;
  typeCard.value = type;
  // aMap.setZoomAndCenter(12, [data.gps.longitude, data.gps.latitude]);
  content.value = cockpitStore.getLineDetail(val);
  console.log("content.value", content.value);
  aMap.setZoomAndCenter(14, [
    content.value.takeoffPoint[0],
    content.value.takeoffPoint[1],
  ]);
  title.value = "航线信息";
  dialogVisible.value = true;

  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开企业弹窗
 * */
function popCompany(val, type) {
  // 关闭tabs弹窗
  tabs.value.tabsVisibleClose();
  dialogVisible.value = false;
  typeCard.value = type;
  content.value = cockpitStore.getCompanyDetail(val);
  title.value = "企业信息";
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

function throttle(fn, time) {
  let flag = true;
  return function (...argu) {
    if (!flag) {
      return;
    }
    flag = false;
    let timer = setTimeout(() => {
      fn(...argu);
      flag = true;
      clearTimeout(timer);
      timer = null;
    }, time);
  };
}

/**
 * @打开机场天气弹窗
 * */
async function popAirport(val, type) {
  // 关闭tabs弹窗
  if (isShowDetail.value) tabs.value.tabsVisibleClose();
  dialogVisible.value = false;
  typeCard.value = type;
  let data = {};
  let name = "";
  cockpitStore.airportWeatherList.map((item) => {
    if (val === item.label) {
      data = item;
      name = item.label;
    }
  });
  content.value = data;
  title.value = `${val}天气信息`;
  dialogVisible.value = true;
  title.value = `${name}天气`;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开民航
 * */
async function popPlane(val, type) {
  // 关闭tabs弹窗
  tabs.value.tabsVisibleClose();
  dialogVisible.value = false;
  typeCard.value = type;
  content.value = mqttStore.getDetailByDroneUk(val);
  isShowDetail.value = true;
  title.value = "航班号";
  dialogVisible.value = true;

  setTimeout(() => {
    let box = document.getElementById("cardID");
    // let leftOffset = entityPosition.x - box.clientWidth - 50;
    // let topOffset = entityPosition.y - box.clientHeight / 2;
    // box.style.left = leftOffset + "px";
    // box.style.top = topOffset + "px";
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开飞行器弹窗
 * */
function popAircraft(id) {
  // 关闭普通弹窗
  visibleClose();
  tabs.value.tabsVisibleClose(); // ---------就是他
  const { aircraftId, droneUK } = mqttStore.getAircraftSn(id);
  dialogVisible.value = false;
  // isShowDetail.value = true;
  flyTaskStore.openTabs("first", aircraftId, null, null, droneUK);

  setTimeout(() => {
    let box = document.getElementById("tabCard");
    // let leftOffset = entityPosition.x - box.clientWidth - 50;
    // let topOffset = entityPosition.y - box.clientHeight / 2;
    // box.style.left = leftOffset + "px";
    // box.style.top = topOffset + "px";
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

/**
 * @打开空域弹窗
 * */
async function popAirspace(val, type) {
  // 关闭tabs弹窗
  if (isShowDetail.value) tabs.value.tabsVisibleClose();
  dialogVisible.value = false;
  typeCard.value = type;
  const { data } = await getDetailInfo(val);
  if (data.circle == 0) {
    aMap.setZoomAndCenter(12, [data.gps.longitude, data.gps.latitude]);
  } else {
    aMap.setZoomAndCenter(12, [
      data.pointLocation.split(",")[0],
      data.pointLocation.split(",")[1],
    ]);
  }
  data.dateRange =
    data.endTime === "2999-12-12 23:59:59"
      ? "永久有效"
      : `${data.startTime} ~ ${data.endTime}`;

  title.value = "空域信息";
  content.value = data;
  dialogVisible.value = true;
  setTimeout(() => {
    let box = document.getElementById("cardID");
    // let leftOffset = entityPosition.x - box.clientWidth - 50;
    // let topOffset = entityPosition.y - box.clientHeight / 2;
    box.style.left = 150 + "px";
    box.style.top = 150 + "px";
  }, 100);
}

// ----------------------------------------------   空域切换    ------------------------------------------------------------

// 当前选中飞行计划空域存储标识
const curAirspace = ref();
/**
 * @description: 几何体坐标数据处理
 */
const handling = (pointLocation) => {
  // 处理每个坐标字符串
  var trimmedString = pointLocation.replace(/\[/g, "").replace(/\]/g, "");
  // 分割成坐标字符串数组
  var coordinateStrings = trimmedString.split(",");
  // 处理每个坐标字符串
  var coordinates = [];
  for (var i = 0; i < coordinateStrings.length; i += 2) {
    var longitude = parseFloat(coordinateStrings[i]);
    var latitude = parseFloat(coordinateStrings[i + 1]);
    coordinates.push([longitude, latitude]);
  }
  return coordinates;
};

let kongyuObj = {};
/**
 * @显示空域信息
 * */
async function addAirspace(id) {
  const { data } = await getAirTypeIds(id);
  if (data.length > 0) {
    data.map((item) => {
      item.EntityType = "airspace";
      if (item.circle == 1) {
        let positions = item.pointLocation.split(",").map(Number);
        GTitleset.CysGeometry(
          positions,
          item.radius,
          item.topHeight,
          item.fullColor,
          item
        );
      } else {
        // 多边形
        let coordinates = handling(item.pointLocation);
        coordinates.push(coordinates[0]);
        let position = [item.gps.longitude, item.gps.latitude, 1000];
        kongyuObj = item;
        GTitleset.iconSprite(
          position,
          "startPoint.png",
          item,
          "kongyu",
          0.03,
          0.035
        );
        GTitleset.createTag(position, item.airspaceName, [0.1, 0.02, 0.005]);
        GTitleset.polygonGeometry2(
          coordinates,
          item.topHeight,
          item.lineColor,
          item
        );
      }
    });
  }
}

/**
 * @隐藏空域信息
 * */
function hideAirspace(id) {
  GTitleset.removeCysGeometry(id);
  // GTitleset.removetextSprite(kongyuObj.id);
  GTitleset.removeIconSprite(kongyuObj.id);
  GTitleset.removewall();
}

/**
 * @显示当前选中飞行计划的空域
 * */
function addCurAirspace(data) {
  GController.flyToTarget([...data.centerPoint], data.zoom);
  let positions = data.pointLocation.split(",").map(Number);
  GTitleset.CysGeometry(
    positions,
    data.radius,
    data.topHeight,
    data.fullColor,
    data
  );
  curAirspace.value = data.airTypeId;
}

/**
 * @移除当前空域
 * */
function removeCurAirspace() {
  if (!curAirspace.value) return;
  GTitleset.removeCysGeometry(curAirspace.value);
  curAirspace.value = null;
}
// ----------------------------------------------  切换地图底图样式  ------------------------------------------------------------

/**
 * @切换卫星地图
 * */
function chooseWXMap() {
  isShowDetail.value = true;
  GController.swicthSatellite();
  GTitleset.closeModel("WX");
}

/**
 * @移除卫星地图
 * */
function removeWXMap() {}

/**
 * @切换三维地图
 * */
function chooseTMap() {
  isShowDetail.value = false;
  GController.showVectorMap();
  GTitleset.showModel("SW");
}

/**
 * @移除矢量地图
 * */
function removeTMap() {}

/**
 * @切换矢量地图
 * */
function chooseVectorMap() {
  isShowDetail.value = true;
  GController.show3DMap();
  GTitleset.closeModel("SL");
}

// ----------------------------------------------  飞行器显示与隐藏  ------------------------------------------------------------

/**
 * @显示无人机
 */
function addDrone(type) {
  const droneList = mqttStore.controlShowDrone(type);
  droneList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, "aircraft", 0.03, 0.03);
  });
}

/**
 * @隐藏无人机
 */
function removeDrone(type) {
  const droneList = mqttStore.controlShowDrone(type);
  droneList.forEach((item) => {
    GTitleset.removeIconSprite(item.droneUK);
  });
}

/**
 * @显示通航飞行器
 */
function addPlane() {
  const planeList = mqttStore.controlShowPlane();
  planeList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, "aircraft", 0.03, 0.03);
  });
}

/**
 * @隐藏通航飞行器
 */
function removePlane() {
  const planeList = mqttStore.controlShowPlane();
  //地图上去掉通航飞行器图标
  planeList.forEach((item) => {
    GTitleset.removeIconSprite(item.droneUK);
  });
}

/**
 * @显示民航飞行器
 */
function addMHPlane() {
  const minhangList = mqttStore.controlShowMHPlane();
  minhangList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(position, item.icon, item, "plane", 0.03, 0.03);
  });
}

/**
 * @隐藏民航飞行器
 */
function removeMHPlane() {
  const minhangList = mqttStore.controlShowMHPlane();
  minhangList.forEach((item) => {
    GTitleset.removetextSprite(item.droneUK);
    GTitleset.removeIconSprite(item.droneUK);
  });
}

/**
 * @高度搜索
 */
function heightSearch(low, top) {
  const { removeList, showList } = mqttStore.searchHeight(low, top);
  removeList.forEach((item) => {
    GTitleset.removeIconSprite(item.droneUK);
  });
  showList.forEach((item) => {
    let position = [item.longitude, item.latitude, item.height];
    GTitleset.iconSprite(
      position,
      item.icon,
      item,
      item.EntityType,
      0.03,
      0.03
    );
  });
}

// ----------------------------------------------  气象  ------------------------------------------------------------

// 风场实例与定时器
let timer = null;
let windy = null;

/**
 * @开启风场
 * */
const createWindy = () => {
  compassShow.value = true;
  windList.value = viewer.value.windyDraw(weatherList);
};

/**
 * @关闭风场
 * */
const closeWindy = () => {
  compassShow.value = false;
  // viewer.value.viewer.scene.primitives.remove(windy.lines);
  // clearInterval(timer);
  viewer.value.closeWindDraw(windList.value);
  windList.value = [];
};

// 风力图标
let windList = ref([]);
// 温度图标
let tempList = ref([]);
// 降水图标
let rainList = ref([]);
// 风力图标
let windPowerList = ref([]);
// 风速图标
let windSpeedList = ref([]);
// 设备气象
let deviceWeatherList = ref([]);
/**
 * @温度
 * */
const heatMap = () => {
  isShowDetail.value = true;
  tempList.value = GController.drawTemp(weatherList);
  deviceMeteorological("WD");
  GController.flyToTarget([120.155125, 30.264725], 11);
};

/**
 * @降水
 * */
const precipitation = () => {
  isShowDetail.value = true;
  rainList.value = GController.drawRain(weatherList);
  deviceMeteorological("JS");
  GController.flyToTarget([120.155125, 30.264725], 11);
};

/**
 * @风力
 * */
const windPowerShow = () => {
  isShowDetail.value = true;
  windList.value = GController.drawWind(weatherList);
  deviceMeteorological("FL");
  GController.flyToTarget([120.155125, 30.264725], 11);
};

/**
 * @设备气象
 * */
const deviceMeteorological = (type) => {
  getDeviceWeather().then((res) => {
    if (res.code === 200) {
      deviceWeatherList = res.data;
      let list = GController.deviceMeteorological(deviceWeatherList, type);
      switch (type) {
        case "WD":
          tempList.value = [...tempList.value, ...list];
          break;
        case "JS":
          rainList.value = [...rainList.value, ...list];
          break;
        case "FL":
          windList.value = [...windList.value, ...list];
          break;
      }
    }
  });
};

/**
 * @关闭气象
 * */
const closeWeather = (type) => {
  isShowDetail.value = false;
  GController.defaultAngle(defaultViewShow);
  console.log(type);
  switch (type) {
    case "temp":
      GController.removeWeather(tempList.value);
      tempList.value = [];
      break;
    case "wind":
      GController.removeWeather(windList.value);
      windList.value = [];
      break;
    case "rain":
      GController.removeWeather(rainList.value);
      rainList.value = [];
      break;
  }
};

// ----------------------------------------------     企业机场数据  -------------------------------------------------------------------
/**
 * @添加企业Marker
 * */
function addCompany() {
  let companyList = cockpitStore.companyList;
  GController.drawMassPoint(companyList, "company");
}

/**
 * @移除企业Marker
 * */
function removeCompany() {
  GController.removeMassPoint("company");
}

/**
 * @添加机场Marker
 * */
function addAirport() {
  let airportList = cockpitStore.airportList;
  GController.drawMassPoint(airportList, "airport");
}

/**
 * @移除机场Marker
 * */
function removeAirport() {
  GController.removeMassPoint("airport");
}

// ----------------------------------------------     航线数据数据 ---------------------------------------------------------------

// 通航航线
let planeLineList = [];
// 无人机航线
let UAVLineList = [];
// 实施飞行轨迹
let curLine = [];
let curIcon = null;
let interval = null;
/**
 * @添加通航航线
 * */
function addPlaneLine() {
  let planeLines = cockpitStore.planeLines;
  if (planeLines.length < 1) return;
  planeLines.map((item) => {
    const { line, startPoint, endPoint, standbyPoint, standbyLine } =
      GTitleset.drawLine1(item);
    planeLineList.push(line);
    planeLineList.push(endPoint);
    planeLineList.push(startPoint);
    planeLineList.push(standbyPoint);
    planeLineList.push(standbyLine);
  });
}

/**
 * @移除通航航线
 * */
function removePlaneLine() {
  GTitleset.removeLineList(planeLineList);
  planeLineList = [];
}

/**
 * @添加无人机航线
 * */
function addUAVLine() {
  let UAVLines = cockpitStore.UAVLines;
  if (UAVLines.length < 1) return;
  UAVLines.map((item, index) => {
    const { line, startPoint, endPoint, standbyPoint, standbyLine } =
      GTitleset.drawLine1(item);
    UAVLineList.push(line);
    UAVLineList.push(startPoint);
    UAVLineList.push(endPoint);
    UAVLineList.push(standbyPoint);
    UAVLineList.push(standbyLine);
  });
}

/**
 * @移除无人机航线
 * */
function removeUAVLine() {
  GTitleset.removeLineList(UAVLineList);
  UAVLineList = [];
}

/**
 * @添加当前选中无人机航线
 * */
function addCurUAVLine(dataArr) {
  dataArr.map((item) => {
    if (item.EntityType === "applyline") {
      GController.flyToTarget([...item.centerPoint], item.zoom);
      const { line, startPoint, endPoint, standbyPoint, standbyLine } =
        GTitleset.drawLine1(item);
      curLine.push(line);
      curLine.push(startPoint);
      curLine.push(endPoint);
      curLine.push(standbyPoint);
      curLine.push(standbyLine);
    } else if (item.EntityType === "track") {
      curIcon = GTitleset.flyicon(item.position[0], item.droneIcon);
      let position = [...item.position[0]];
      if (dataArr.length === 1) GController.flyToTarget(position, item.zoom);
      const { flyHandPoint, flyHandLine } = GTitleset.aircraftTrack(item);
      curLine.push(flyHandPoint);
      curLine.push(flyHandLine);
      interval = setInterval(() => {
        let stopInterval = GTitleset.moveOnCurve(curIcon, item.color);
        if (stopInterval == "stop") {
          if (interval) {
            clearInterval(interval);
            interval = null;
          }
        }
      }, 200);
    }
  });
}

/**
 * @移除当前选中无人机航线
 * */
function removeCurUAVLine() {
  GTitleset.removeLineList(curLine);
  GTitleset.clearRemovedrawlLine();
  GTitleset.remove(curIcon);
  curLine = [];
  curIcon = null;
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  defaultPerspect();
}
// ----------------------------------------------     设备数据  ---------------------------------------------------------------
/**
 * @添加无人机探测设备Marker
 * */
function addDetectDevice() {
  let detectDeviceList = cockpitStore.zhenceList;
  GController.drawMassPoint(detectDeviceList, "zhence");
}

/**
 * @移除无人机探测设备Marker
 * */
function removeDetectDevice() {
  GController.removeMassPoint("zhence");
}

/**
 * @添加无线电压制设备Marker
 * */
function addCounterDevice() {
  let counterDeviceList = cockpitStore.fanzhiList;
  GController.drawMassPoint(counterDeviceList, "fanzhi");
}

/**
 * @移除无线电压制设备Marker
 * */
function removeCounterDevice() {
  GController.removeMassPoint("fanzhi");
}

/**
 * @添加无线电探测设备Marker
 * */
function addRadioDevice() {
  let radioDeviceList = cockpitStore.wuxiandianList;
  GController.drawMassPoint(radioDeviceList, "wxd");
}

/**
 * @移除无线电探测设备Marker
 * */
function removeRadioDevice() {
  GController.removeMassPoint("wxd");
}

/**
 * @添加气象设备Marker
 * */
function addWeatherDevice() {
  let weatherDeviceList = cockpitStore.weatherDeviceList;
  GController.drawMassPoint(weatherDeviceList, "qixiang");
}

/**
 * @移除气象设备Marker
 * */
function removeWeatherDevice() {
  GController.removeMassPoint("qixiang");
}

/**
 * @添加导航诱骗设备Marker
 * */
function addYouPianDevice() {
  let youpianDeviceList = cockpitStore.youpianList;
  GController.drawMassPoint(youpianDeviceList, "youpian");
}

/**
 * @移除导航诱骗设备Marker
 * */
function removeYouPianDevice() {
  GController.removeMassPoint("youpian");
}

/**
 * @阿里云-天气预报
 * */
var weatherList = [];

const weather = async () => {
  // console.log("----------------------------进来了--------------------------");
  let list = [
    "284869",
    "284872",
    "284873",
    "284874",
    "1186",
    "1187",
    "1189",
    "1190",
    "287062",
    "287063",
  ]; // 对应cesium里边的城区顺序
  await getTemperature(list).then((res) => {
    if (res.length > 0) {
      res.map((item) => {
        let lon = null;
        let lat = null;
        if (item.data.city.name === "杭州市") {
          lon = 120.1650798;
          lat = 30.25258003;
        } else if (item.data.city.name === "上城区") {
          lon = 120.169329;
          lat = 30.242312;
        } else if (item.data.city.name === "拱墅区") {
          lon = 120.141391;
          lat = 30.319424;
        } else if (item.data.city.name === "杭州市西湖区") {
          lon = 120.13006;
          lat = 30.259543;
        } else if (item.data.city.name === "滨江区") {
          lon = 120.211816;
          lat = 30.20856;
        } else if (item.data.city.name === "萧山区") {
          lon = 120.2597929;
          lat = 30.15987182;
        } else if (item.data.city.name === "余杭区") {
          lon = 119.9491413909614;
          lat = 30.315641924593855;
        } else if (item.data.city.name === "富阳区") {
          lon = 119.9460172;
          lat = 30.05939327;
        } else if (item.data.city.name === "临安区") {
          lon = 119.7153043;
          lat = 30.22959808;
        } else if (item.data.city.name === "临平区") {
          lon = 120.299094;
          lat = 30.419183;
        } else if (item.data.city.name === "钱塘区") {
          lon = 120.497834;
          lat = 30.299469;
        }
        let icon = null;
        if (
          item.data.condition.condition === "晴" ||
          item.data.condition.condition === "大部晴朗"
        ) {
          icon = "/img/weather/W0.png";
        } else if (
          item.data.condition.condition === "多云" ||
          item.data.condition.condition === "少云"
        ) {
          icon = "/img/weather/W1.png";
        } else if (item.data.condition.condition === "阴") {
          icon = "/img/weather/W2.png";
        } else if (
          item.data.condition.condition === "阵雨" ||
          item.data.condition.condition === "局部阵雨" ||
          item.data.condition.condition === "小阵雨" ||
          item.data.condition.condition === "强阵雨"
        ) {
          icon = "/img/weather/W3.png";
        } else if (
          item.data.condition.condition === "阵雪" ||
          item.data.condition.condition === "小阵雪"
        ) {
          icon = "/img/weather/W13.png";
        } else if (
          item.data.condition.condition === "雾" ||
          item.data.condition.condition === "冻雾"
        ) {
          icon = "/img/weather/W18.png";
        } else if (
          item.data.condition.condition === "沙尘暴" ||
          item.data.condition.condition === "强沙尘暴"
        ) {
          icon = "/img/weather/W20.png";
        } else if (
          item.data.condition.condition === "浮尘" ||
          item.data.condition.condition === "尘卷风" ||
          item.data.condition.condition === "扬沙"
        ) {
          icon = "/img/weather/W29.png";
        } else if (item.data.condition.condition === "霾") {
          icon = "/img/weather/W45.png";
        } else if (
          item.data.condition.condition === "雷阵雨" ||
          item.data.condition.condition === "雷电" ||
          item.data.condition.condition === "雷暴"
        ) {
          icon = "/img/weather/W4.png";
        } else if (
          item.data.condition.condition === "雷阵雨伴有冰雹" ||
          item.data.condition.condition === "冰雹" ||
          item.data.condition.condition === "冰针" ||
          item.data.condition.condition === "冰粒"
        ) {
          icon = "/img/weather/W5.png";
        } else if (item.data.condition.condition === "雨夹雪") {
          icon = "/img/weather/W6.png";
        } else if (item.data.condition.condition === "小雨") {
          icon = "/img/weather/W7.png";
        } else if (item.data.condition.condition === "中雨") {
          icon = "/img/weather/W8.png";
        } else if (item.data.condition.condition === "大雨") {
          icon = "/img/weather/W9.png";
        } else if (
          item.data.condition.condition === "暴雨" ||
          item.data.condition.condition === "大暴雨" ||
          item.data.condition.condition === "特大暴雨"
        ) {
          icon = "/img/weather/W10.png";
        } else if (item.data.condition.condition === "小雪") {
          icon = "/img/weather/W14.png";
        } else if (item.data.condition.condition === "中雪") {
          icon = "/img/weather/W15.png";
        } else if (item.data.condition.condition === "大雪") {
          icon = "/img/weather/W16.png";
        } else if (item.data.condition.condition === "暴雪") {
          icon = "/img/weather/W17.png";
        } else if (item.data.condition.condition === "冻雨") {
          icon = "/img/weather/W19.png";
        } else if (item.data.condition.condition === "雪") {
          icon = "/img/weather/W15.png";
        } else if (item.data.condition.condition === "雨") {
          icon = "/img/weather/W8.png";
        } else if (item.data.condition.condition === "小到中雨") {
          icon = "/img/weather/W7.png";
        } else if (item.data.condition.condition === "中到大雨") {
          icon = "/img/weather/W9.png";
        } else if (item.data.condition.condition === "大到暴雨") {
          icon = "/img/weather/W10.png";
        } else if (item.data.condition.condition === "小到中雪") {
          icon = "/img/weather/W15.png";
        }
        let windLevel = item.data.condition.windLevel.toString() + ".0";
        let obj = {
          id: item.data.city.name,
          label: item.data.city.name,
          lon: lon,
          lat: lat,
          icon: icon,
          windDegrees: item.data.condition.windDegrees, // 风向角度
          windDir: item.data.condition.windDir, // 风向
          windLevel: windLevel, // 风力等级
          windSpeed: item.data.condition.windSpeed, // 风速
          temp: parseInt(item.data.condition.temp),
          condition: item.data.condition.condition,
        };
        weatherList.push(obj);
      });
    }
  });
};

// ----------------------------------------------     路网的显示与隐藏    ----------------------------------------------------

/**
 * @显示路网
 * */
function showRoad() {
  viewer.value.dataRoadShow();
}

/**
 * @隐藏路网
 * */
function hideRoad() {
  viewer.value.delete3D();
}

// ----------------------------------------------     页面相关  --------------------------------------------------------------

/**
 * @隐藏所有
 * */

function removeAll() {}

/**
 * @跳转至双屏
 * */
const changeDub = () => {
  const url = router.resolve({
    name: "dubAirMonitor",
  });

  window.open(url.href, "_blank");
};

/**
 * @返回系统首页
 * */
const backToHome = () => {
  router.push({
    name: "Index",
  });
};

/**
 * @底部菜单显示与隐藏
 * */
const footerHide = () => {
  footerIsShow.value = !footerIsShow.value;
  console.log("footerIsShow.value", footerIsShow.value);
};

// ----------------------------------------------     浏览器相关   -------------------------------------------------------------------

/**
 * @帮助
 * */
function requestHelp() {
  isHelpCard.value = !isHelpCard.value;
}

/**
 * @设置全屏
 * */
function requestFullScreen() {
  // 是否全屏，否为null
  let full = document.fullscreenElement;
  if (!full) {
    // document自带的全屏方法
    document.documentElement.requestFullscreen();
  } else {
    // document自带的推出全屏方法
    document.exitFullscreen();
  }
}

/**
 * @监听单屏大小
 * */
function windowResize() {
  // this.isSmallScreen = window.innerWidth < 600;
  isSmall.value = window.innerWidth < 1540;
}

// ----------------------------------------------     定时更新数据   ----------------------------------------------------------

let updateInterval = setInterval(() => {
  // 今日侦测架次统计
  cockpitStore.getDetectData();
  // 今日报警数量
  cockpitStore.getTodayAlarmNum();
}, 15000);

// ----------------------------------------------     provide   ----------------------------------------------------------

provide("addCompany", addCompany);
provide("removeCompany", removeCompany);
provide("addAirport", addAirport);
provide("removeAirport", removeAirport);
provide("addPlaneLine", addPlaneLine);
provide("removePlaneLine", removePlaneLine);
provide("addUAVLine", addUAVLine);
provide("removeUAVLine", removeUAVLine);
provide("chooseWXMap", chooseWXMap);
provide("removeWXMap", removeWXMap);
provide("chooseVectorMap", chooseVectorMap);
provide("chooseTMap", chooseTMap);
provide("removeTMap", removeTMap);
provide("addDetectDevice", addDetectDevice);
provide("removeDetectDevice", removeDetectDevice);
provide("addCounterDevice", addCounterDevice);
provide("removeCounterDevice", removeCounterDevice);
provide("addRadioDevice", addRadioDevice);
provide("removeRadioDevice", removeRadioDevice);
provide("addWeatherDevice", addWeatherDevice);
provide("removeWeatherDevice", removeWeatherDevice);
provide("addYouPianDevice", addYouPianDevice);
provide("removeYouPianDevice", removeYouPianDevice);
provide("addAirspace", addAirspace);
provide("hideAirspace", hideAirspace);
provide("createWindy", createWindy);
provide("closeWeather", closeWeather);
provide("closeWindy", closeWindy);
provide("addDrone", addDrone);
provide("removeDrone", removeDrone);
provide("addPlane", addPlane);
provide("removePlane", removePlane);
provide("addMHPlane", addMHPlane);
provide("removeMHPlane", removeMHPlane);
provide("heatMap", heatMap);
// provide("closeHeatMap", closeHeatMap);
provide("precipitation", precipitation);
// provide("closePrecipitation", closePrecipitation);
provide("hideRoad", hideRoad);
provide("showRoad", showRoad);
provide("windPowerShow", windPowerShow);
provide("isShowDetail", isShowDetail);
provide("changeIsShowDetail", changeIsShowDetail);

// ----------------------------------------------    生命周期   -------------------------------------------------------

onBeforeMount(() => {
  // 获取机构信息
  cockpitStore.getCompanyAsync();
  // 获取机场信息
  cockpitStore.getAirportAsync();
  // 航线统计
  // cockpitStore.getAirouteAsync();
  // 获取在飞航线数据
  cockpitStore.getMapLines();
  // 获取设备列表
  cockpitStore.getDeviceList();
  // 执行架次统计
  // cockpitStore.getExecuteData();
  // 执行架次统计
  // cockpitStore.getAircraftData();
  // cockpitStore.getDetectData();
  // 飞行计划统计
  // cockpitStore.getFlyPlanData();
  // 今日报警数量
  // cockpitStore.getTodayAlarmNum();
  // 获取已开启的告警类型
  mqttStore.getAlarmType();
  // 获取机场天气数据
  cockpitStore.getAirportWeatherFun();
});

onMounted(() => {
  // initialization();
  init();
  // windowResize();
  // window.addEventListener("resize", windowResize);
  // requestFullScreen();
  mqttMsg();
  // mqttData();
  // weather();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", windowResize);
  clearInterval(updateInterval);
  stopConnect();
  if (viewer.value) viewer.value.viewer.destroy();
});
</script>

<style scoped lang="scss">
.skipBtn {
  width: 92px;
  height: 40px;
  background: #000000;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.5;
  position: absolute;
  z-index: 1000;
  right: 40px;
  top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.immediatelyClass {
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: bounce_scale_1 0.8s ease-out;

  .arrowAll {
    width: 258px;
    height: 295px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1001;
  }

  .arrowAllLeft {
    -webkit-animation: move_4 1s infinite;
  }

  @-webkit-keyframes move_4 {
    0% {
      -webkit-transform: translateX(-100px);
      opacity: 0;
    }
  }

  .arrowAllRight {
    -webkit-animation: move_5 1s infinite;
  }

  @-webkit-keyframes move_5 {
    0% {
      -webkit-transform: translateX(100px);
      opacity: 0;
    }
  }
}

@-webkit-keyframes bounce_scale_1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  40% {
    -webkit-transform: scale(0.9);
  }
  55% {
    -webkit-transform: scale(1);
  }
  70% {
    -webkit-transform: scale(0.98);
  }
  85%,
  100% {
    -webkit-transform: scale(1);
  }
}

.markCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cockpit {
  //position: relative;
  //width: 100%;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;

  .waringShowViewClass {
    z-index: 100;
    border-radius: 4px;
    width: 188px;
    min-height: 220px;
    position: absolute;
    right: 8%;
    top: 21%;
    padding: 10px 30px;
    animation: rotate 3s linear infinite;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    :deep .el-radio.el-radio--large .el-radio__label {
      color: white;
    }

    :deep .el-checkbox.el-checkbox--large .el-checkbox__label {
      color: white;
    }
  }

  #heatMap {
    width: 500px;
    height: 500px;
    position: absolute;
    z-index: 1000;
    top: 0;
  }

  .cockpit-left {
    position: absolute;
    top: 0;
    width: 320px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 2;
  }

  .cockpit-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 2;
  }

  .windDraw {
    width: 500px;
    height: 500px;
    background: url("/img/windTrends.png");
  }

  .compass {
    position: absolute;
    pointer-events: none;
    width: 80px;
    height: 78px;
    bottom: 40%;
    left: 3.7%;
    opacity: 0.6;
    background: url("/img/compass.png");
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/img/cockpit/mark.png");
    z-index: 5;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    //overflow: hidden;
    z-index: 1;
  }

  // .btn {
  //   position: absolute;
  //   top: 50%;
  //   left: 10%;
  //   z-index: 888;
  // }

  .helpCard {
    position: absolute;
    top: 7%;
    right: 4%;
    z-index: 100;
    width: 219px;
    height: 154px;
    //background-color: rgba(9, 27, 35, 0.8);
    //background-color: rgba(9, 27, 35, 0.8);
    //border: 0.6px rgba(255, 255, 255, 0.6) solid;
    backdrop-filter: blur(5px);
    border-radius: 4px;
    -webkit-backdrop-filter: blur(5px);
    padding: 10px 20px;
    animation: rotate 3s linear infinite;

    .helpCard-content {
      display: flex;
      align-items: center;
      color: white;
      font-size: 16px;
      margin: 5px 0;

      .UAV1 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV1.png") no-repeat;
        margin-right: 10px;
      }
      .UAV2 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV2.png") no-repeat;
        margin-right: 10px;
      }
      .UAV3 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV3.png") no-repeat;
        margin-right: 10px;
      }
      .UAV4 {
        width: 26px;
        height: 26px;
        background: url("/img/cockpit/UAV4.png") no-repeat;
        margin-right: 10px;
      }
    }
  }

  .toHelp {
    position: absolute;
    top: 13px;
    right: 204px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/help.png");
    background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .toFull {
    position: absolute;
    top: 13px;
    right: 159px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/full.png");
    background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .toDub {
    position: absolute;
    top: 13px;
    right: 112px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/dub.png");
    background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }

  .toHome {
    position: absolute;
    top: 13px;
    right: 63px;
    z-index: 100;
    width: 25px;
    height: 25px;
    border-radius: 2px;
    border: none;
    background: url("/img/cockpit/goBack.png");
    background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  }
  .toFull.isSmall,
  .toDub.isSmall,
  .toHome.isSmall {
    top: 5px;
  }
}

:deep(.amap-marker-label) {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;

  .markerLabel {
    border: none;
    // width: 120px;
    padding: 0 3px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 0;
    font-size: 14px;
    background-color: rgba(0, 133, 19, 0.8);
    color: #fff;
  }
}

@keyframes rotate {
  0% {
    //border: 1px solid #44aeff;
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
  50% {
    border: 2px rgba(68, 174, 255, 0.4) solid;
  }
  100% {
    border: 2px rgba(68, 174, 255, 0.6) solid;
  }
}
</style>
<style lang="scss">
#waringShowViewClass {
  .el-checkbox-group {
    .el-checkbox.el-checkbox--large {
      .el-checkbox__inner {
        border-radius: 50% !important;
        // border: 2px solid #409eff;
        width: 14px;
        height: 14px;
        background-color: #fff;
        padding: 0;
        margin-right: 10px;
      }

      .el-checkbox__input.is-checked {
        .el-checkbox__inner {
          background-color: #409eff;
          border-color: #409eff;
        }
      }
    }
  }
}
</style>

<style>
.custom-content-marker {
  position: relative;
  width: 70px;
  height: 70px;
  background: url("/img/cockpit/redpoint.png") no-repeat;
  background-size: 100% 100%;
}
</style>
